<template>
  <div>
    <div style="margin-bottom:10px" v-if="cation_state == 0">
      <alert-box content="您的跑团未认证或认证已过期无法进行提现操作"></alert-box>
      <!-- <el-alert title="警告提示" type="error" description="您的跑团未认证或认证已过期无法进行提现操作" show-icon></el-alert> -->
    </div>
    <div class="body-box finance-pal" v-loading="load_pal">
      <div class="pal-left">
        <div class="pal-left-top">
          <span class="cash-price-title">可提现金额：</span>
          <span class="cash-price-num">{{pal_info.cash_price}}</span>
          <el-button size="mini" type="text" @click="toCash()">去提现</el-button>
        </div>
        <div class="pal-left-bottom">
          <span>总收入：{{pal_info.total_price}}</span>
          <span>总支出：{{pal_info.expand_price}}</span>
          <span>待结算：{{pal_info.set_price}}</span>
          <span>提现中：{{pal_info.cash_in}}</span>
        </div>
      </div>
      <div class="pal-right">
        <el-button class="com-btn pay-recharge">充值</el-button>
      </div>
    </div>
    <div class="body-box">
      <window-title title="财务记录"></window-title>
      <!-- 搜索 -->
      <el-form :inline="true" size="mini" style="margin-top:20px;">
        <el-form-item label="订单号">
          <el-input placeholder="请输入订单号查询" v-model="out_trade_no"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="state">
            <el-option v-for="(item,key) in state_list" :key="key" :value="key" :label="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="times"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button class="com-btn" icon="el-icon-search" @click="handleClick()">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- tab -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane name="0">
          <span slot="label">全部</span>
        </el-tab-pane>
        <el-tab-pane name="1">
          <span slot="label">收入</span>
        </el-tab-pane>
        <el-tab-pane name="2">
          <span slot="label">支出</span>
        </el-tab-pane>
      </el-tabs>
      <!-- 表格 -->
      <el-table size="mini" border :data="list.data" v-loading="list_load">
        <el-table-column type="index"></el-table-column>
        <el-table-column label="单号" prop="out_trade_no" width="150px"></el-table-column>
        <el-table-column label="订单类型" width="80px">
          <template slot-scope="item">
            <el-tag size="mini" type="success" v-if="item.row.type== 1">进账</el-tag>
            <el-tag size="mini" type="danger" v-if="item.row.type== 2">支出</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="来源项目" prop="source"></el-table-column>
        <el-table-column label="状态"  width="80px">
          <template slot-scope="item">
            <el-tag size="mini" type="success" v-if="item.row.state== 1">已结算</el-tag>
            <el-tag size="mini" type="danger" v-if="item.row.state== 2">待结算</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="金额" prop="price" width="100px"></el-table-column>
        <el-table-column label="余额" prop="yprice" width="100px"></el-table-column>
        <el-table-column label="时间" prop="create_time" width="150px"></el-table-column>
      </el-table>
      <div class="page-box">
          <el-pagination
            background
            small
            :current-page="list.current_page"
            :page-size="list.per_page"
            layout="total, prev, pager, next, jumper"
            :total="list.total"
            @current-change="changePage"
          ></el-pagination>
        </div>
      <!-- 提现模态框 -->
      <el-dialog :visible.sync="is_cash" title="跑团提现" width="600px" :destroy-on-close="true">
        <el-form label-position="top" size="small" :model="form" :rules="rules" ref="cashform">
          <el-form-item label="提现金额" prop="price">
            <el-input placeholder="请输入提现金额" type="number" v-model="form.price"></el-input>
          </el-form-item>
          <el-form-item label="提现银行" prop="bank_id">
            <el-select v-model="form.bank_id" class="select-block">
              <el-option
                v-for="(item,key) in cash_bank"
                :key="key"
                :value="item.id"
                :label="item.bank"
              >
                <span style="float: left">{{ item.bank }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.bank_no }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button class="com-btn" @click="cashSub('cashform')">立即提现</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 银行模态框 -->
    </div>
  </div>
</template>

<script>
import windowTitle from "../../components/unit/title.vue";
import alertBox from '../../components/unit/alert-box.vue';

export default {
  components: { windowTitle , alertBox },
  data() {
    return {
      out_trade_no: "",
      state: 0,
      times: "",
      state_list: ["全部", "已结算", "待结算"],
      activeName: "0",
      list: {
        current_page: 1,
        data: []
      },
      is_cash: false,
      bank_model: false,
      form: {
        price: "",
        bank_id: ""
      },
      cash_bank: [],
      rules: {
        price: [{ required: true, message: "请输入提现金额", trigger: "blur" }],
        bank_id: [
          { required: true, message: "请选择提现银行", trigger: "blur" }
        ]
      },
      cation: {},
      cation_state: 1,
      pal_info: {},
      load_pal: true,
      list_load : true
    };
  },
  mounted() {
    this.getFinancePal();
    this.getBank();
    this.getCation();
    this.getFinance();
  },
  methods: {
    //分页
    changePage(e){
      this.list.current_page = e;
      this.getFinance();
    },
    //获取财务记录
    getFinance(){
      this.list_load = true;
      this.ajaxs('finance/financeList',{
        data : {page : this.list.current_page,activeName:this.activeName,out_trade_no : this.out_trade_no,state:this.state,times:this.times},
        success:(res) =>{
          this.list = res.msg;
          this.list_load = false;
        }
      });
    },
    //获取认证信息
    getCation() {
      this.ajaxs("finance/getCationInfo", {
        success: res => {
          this.cation = res.msg;
          this.cation_state = 1;
          if (!res.code) this.cation_state = 0;
        }
      });
    },
    //获取列表
    getBank() {
      this.ajaxs("finance/bankList", {
        data: { all: 1 },
        success: res => {
          this.cash_bank = res.msg;
          for (var i in this.cash_bank) {
            var no_start = this.cash_bank[i].no.slice(-4);
            this.cash_bank[i].bank_no = "(" + no_start + ")";
          }
        }
      });
    },
    //获取财务面板数据
    getFinancePal() {
      this.ajaxs("finance/getFInanceInfo", {
        success: res => {
          this.pal_info = res.msg;
          this.load_pal = false;
        }
      });
    },
    //切换TAB
    handleClick() {
      this.list.current_page = 1;
      this.getFinance();
    },
    //去提现
    toCash() {
      if (!this.cation_state) {
        return this.toast(0, "跑团未认证或认证到期无法提现");
      }
      if (!this.cash_bank.length) {
        this.$confirm("你还未添加提现银行卡，是否前去添加?", "提示", {
          confirmButtonText: "去添加",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$router.push({
              path: "/manage/finance/bank"
            });
          })
          .catch(() => {});
        return false;
      }
      this.is_cash = true;
    },
    //提交提现申请
    cashSub(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.ajaxs("finance/addCash", {
            data: this.form,
            success: res => {
              this.toast(res.code, res.msg);
              if (res.code) {
                this.is_cash = false;
                this.getFinancePal();
              }
            }
          });
        }
      });
    }
  }
};
</script>

<style>
.bank-info-box {
  border: 1px solid #e1e1e1;
  padding: 0 20px;
  border-radius: 5px;
  font-size: 14px;
  color: #999;
  background: #f8f8f8;
}
.bank-badge {
  font-size: 12px;
  color: #999;
}
.finance-pal {
  overflow: hidden;
}
.pal-left {
  float: left;
  width: calc(100% - 100px);
}
.pal-right {
  float: left;
  width: 100px;
}
.pal-left-top {
  height: 36px;
  line-height: 36px;
}
.cash-price-title {
  font-weight: bold;
}
.cash-price-num {
  color: #8a70c6;
  margin-right: 20px;
  font-weight: bold;
}
.pal-left-bottom {
  height: 40px;
  line-height: 40px;
}
.pal-left-bottom > span {
  padding-right: 20px;
  margin-left: 20px;
  display: inline-block;
  border-right: 1px solid #e1e1e1;
  height: 20px;
  margin-top: 10px;
  line-height: 20px;
}
.pal-left-bottom > span:first-child {
  margin-left: 0;
}
.pal-left-bottom > span:last-child {
  border: none;
}
.pay-recharge {
  float: right;
  margin-top: 20px;
}
</style>